<template>
    <div class="zjlx_gn">
        <el-row :gutter="20">
            <el-col :span="6">
                <router-link to='/zjlx_bk'>
                    <el-button  type="danger">板块资金</el-button>
                </router-link>
            </el-col>
            <el-col :span="6">
                <router-link to='/zjlx_gn'>
                    <el-button type="primary" >概念资金</el-button>
                </router-link>
            </el-col>
        </el-row>
        <router-view></router-view>

        <template>
            <el-container>
            <el-table
                    :data="zjList"
                    style="width: 100%"
                    @sort-change="onSortChange"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    :row-key="getRowKeys"
                    :expand-row-keys="expands"
                    @row-click="clickRowHandle"
            >

                <el-table-column type="expand" width="1">
                    <template slot-scope="props" >
                    <span v-for="item in props.row.indexList">
                        {{item}}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="名称"
                        width="120" >
                    <template slot-scope="scope" >
                        <div>{{scope.row.index}}{{scope.row.f14}}</div>
                        <div>{{scope.row.f3}}%</div>
                        <div>{{scope.row.f204}}</div>
                        <div>{{scope.row.f205}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="主力净流入(净额)"
                        width="80"  >
                    <template slot-scope="scope" >
                        <div>{{scope.row.f62|numberFormat}}</div>
                        <div>{{scope.row.f184}}%</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="最低排名"
                        width="60"
                        sortable="custom"
                        prop="min"
                        :sort-orders="['ascending','descending']">

                    <template slot-scope="scope" >
                        <div>{{scope.row.min}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="对比上次"
                        width="60"
                        sortable="custom"
                        prop="gap"
                        :sort-orders="['ascending','descending']">
                    <template slot-scope="scope" >
                        <div>{{scope.row.gap}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="最大差距"
                        width="60"
                        sortable="custom"
                        prop="maxGap"
                        :sort-orders="['ascending','descending']">
                    <template slot-scope="scope" >
                        <div>{{scope.row.maxGap}}</div>
                    </template>
                </el-table-column>
            </el-table>
            </el-container>
        </template>



    </div>
</template>

<script>
    import Axios from 'axios';
    export default {
        name: 'Zjlx_gn',
        props: {
            msg: String

        },
        data() {
            return {
                getRowKeys(row) {
                    return row.index;
                },
                zjList: null,
                expands: [],
            }
        },
        created(){
            //发送请求
            this.getzjlx()
        },
        filters: {
            numFilter(value) {
                // 截取当前数据到小数点后两位
                value= value*100;

                let tempVal = parseFloat(value).toFixed(3);
                let realVal = tempVal.substring(0, tempVal.length - 1);
                return realVal;
            },
            numberFormat: function (value="") {
                if(value==null){
                    return "-";
                }
                if(value.indexOf("-")==0){
                    value= value.substring(1);
                    let unit = '';
                    var k = 10000,
                        sizes = ['', '万', '亿', '万亿'],
                        i;
                    if(value < k){
                        value =value;
                    }else{
                        i = Math.floor(Math.log(value) / Math.log(k));
                        value = ((value / Math.pow(k, i))).toFixed(2);
                        unit = sizes[i];
                    }
                    return "-"+value+unit;
                }else{
                    let unit = '';
                    var k = 10000,
                        sizes = ['', '万', '亿', '万亿'],
                        i;
                    if(value < k){
                        value =value;
                    }else{
                        i = Math.floor(Math.log(value) / Math.log(k));
                        value = ((value / Math.pow(k, i))).toFixed(2);
                        unit = sizes[i];
                    }
                    return value+unit;
                }

            }
        },
        methods: {
            changestatus(itme){
            },
            clickRowHandle(row, column, event) {
                if (this.expands.includes(row.index)) {
                    this.expands = this.expands.filter(val => val !== row.index);
                } else {
                    this.expands.push(row.index);
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            getzjlx(){
                var url=this.Global.httpUrl+"/shares/getzjldgn";
                Axios.get(url).then((response)=>{
                    this.zjList=response.data.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },

            /**
             * 表格排序事件处理函数
             * @param {object} {column,prop,order} 列数据|排序字段|排序方式
             */
            onSortChange({ prop, order }) {
                this.zjList.sort(this.compare(prop,order));
            },
            /**
             * 排序比较
             * @param {string} propertyName 排序的属性名
             * @param {string} sort ascending(升序)/descending(降序)
             * @return {function}
             */
            compare (propertyName, sort) {
                return function (obj1, obj2) {
                    var value1 = obj1[propertyName]

                    var value2 = obj2[propertyName]
                    // console.log(value1+"==="+value2);
                    if (typeof value1 === 'string' && typeof value2 === 'string') {
                        const res = value1.localeCompare(value2, 'zh')
                        return sort === 'ascending' ? res : -res
                    } else {
                        if (value1+0 <= value2+0) {
                            return sort === 'ascending' ? -1 : 1
                        } else if (value1 > value2) {
                            return sort === 'ascending' ? 1 : -1
                        }
                    }
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100px;
        min-height: 400px;
    }

</style>
